<template>
  <div class="editor">
    <div class="header">
      <span>编辑文章</span>
      <el-tooltip content="退出后，文章将丢失" placement="bottom" effect="light">
        <el-button style="float: right; padding: 3px 0" type="text" @click="exit">关闭</el-button>
      </el-tooltip>
    </div>
    <el-input v-model="title" placeholder="请输入文章标题" prefix-icon="el-icon-edit-outline"></el-input>

    <el-tag
      :key="tag"
      v-for="tag in dynamicTags"
      closable
      :disable-transitions="false"
      @close="handleClose(tag)"
    >{{ tag }}</el-tag>
    <el-input
      class="input-new-tag"
      v-if="inputVisible"
      v-model="inputValue"
      ref="saveTagInput"
      size="small"
      @keyup.enter.native="handleInputConfirm"
      @blur="handleInputConfirm"
    ></el-input>
    <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
    <el-button type="primary" @click="published">发表文章</el-button>
    <mavon-editor
      v-model="value"
      ref="editor"
      @change="getContent"
      @imgAdd="imgAdd"
      @imgDel="imgDel"
    />
  </div>
</template>
<script>
import request from '../../api/request'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      _id: null,
      date: '',
      views: 0,
      screenWidth: document.body.clientWidth, // 屏幕尺寸
      title: '', //文章标题
      dynamicTags: [], //标签
      inputVisible: false, //标签文本框
      inputValue: '', //标签文本框的值
      value: '', //mavon-editor的纯文本
      centent: '' //mavon-editor带标签的文本
    }
  },
  created() {
    //修改文章，由ArticleTable.vue页面触发
    this.$EventBus.$on('alter', (article) => {
      this.value = article.value
      this.dynamicTags = article.category
      this.title = article.title
      this._id = article._id
      this.date = article.date
      this.views = article.views
    })
  },
  computed: {
    ...mapGetters(['getToken'])
  },
  methods: {
    // 退出编辑文章
    exit() {
      this.value = ''
      this.dynamicTags = []
      this.title = ''
      this._id = null
      this.date = ''
      this.views = 0
      this.$emit('exit')
    },
    // 标签相关的方法
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
    },
    // 添加标签
    showInput() {
      this.inputVisible = true
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    // 标签输入框触发的事件
    handleInputConfirm() {
      let inputValue = this.inputValue
      if (inputValue) {
        this.dynamicTags.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    },

    // markdown相关的方法
    getContent() {
      // this.$refs.editor.d_render 获取带标签的文本
      this.centent = this.$refs.editor.d_render
    },

    // 发表文章
    async published() {
      var result = null
      if (this._id) {
        result = await request({
          url: '/article/published',
          data: {
            _id: this._id,
            title: this.title,
            category: this.dynamicTags,
            content: this.centent,
            value: this.value,
            views: this.views,
            date: this.date
          },
          method: 'post'
        })
      } else {
        result = await request({
          url: '/article/published',
          data: {
            title: this.title,
            category: this.dynamicTags,
            content: this.centent,
            date: new Date(),
            value: this.value
          },
          method: 'post'
        })
      }
      if (result.status) {
        this.$notify({
          title: '成功',
          message: result.msg,
          type: 'success'
        })
        this.isShow = false
        this._id = null
        this.date = ''
        this.views = 0
        this.title = ''
        this.dynamicTags = [] //标签
        this.value = '' //mavon-editor的纯文本
      } else {
        this.$notify.error({
          title: '错误',
          message: result.msg
        })
      }
    },
    async imgAdd(pos, $file) {
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      // // 第一步.将图片上传到服务器.
      var formdata = new FormData()
      formdata.append('file', $file)
      let res = await request(
        {
          url: '/upload/image',
          data: formdata,
          method: 'post'
        },
        config
      )
      let imgUrl = res.imgUrl
      this.$refs.editor.$imglst2Url([[pos, imgUrl]])
    },
    async imgDel(file) {
      // console.log("删除图片", file[0])
      let res = await request({
        url: '/article/image/remove',
        data: {
          imgPath: file[0]
        },
        method: 'post'
      })
      // console.log(res)
    }
  }
}
</script>
<style lang="scss" scoped>
.editor {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  padding: 0px 20px;
  box-sizing: border-box;
  background: white;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
.el-tag {
  margin-right: 5px;
}
.el-input {
  width: 400px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.v-note-wrapper {
  height: 80vh;
}
.sdage {
  color: white;
  background: red;
  padding: 5px;
  text-align: center;
  border-radius: 5px;
}
.header {
  padding: 18px 20px;
  border-bottom: 1px solid #ebeef5;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 20px;
}
</style>
